<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>秒杀商品</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    </link>
    <base th:href="${#request.getContextPath()}+'/'">
</head>
<body>
<table class="table" id="goodslist">
    <tr>
        <td>商品名称</td>
        <td colspan="3" th:text="${goods.goodsname}"></td>
    </tr>
    <tr>
        <td>商品图片</td>
        <td colspan="3"><img th:src="${goods.goodsimg}" width="200" height="200" /></td>
    </tr>
    <tr>
        <td th:if="${flag=='start'}">秒杀开始时间</td>
        <td th:if="${flag!='start'}">秒杀结束时间</td>
        <td id="date" th:if="${flag=='start'}" >[[${#dates.format(goods.startdate, 'yyyy-MM-dd HH:mm:ss')}]]</td>
        <td id="date" th:if="${flag!='start'}" >[[${#dates.format(goods.enddate, 'yyyy-MM-dd HH:mm:ss')}]]</td>

        <td id="killStatus">

        </td>
        <td>
            <span id="flag" th:if="${flag=='start'}">未开始</span>
            <span id="flag" th:if="${flag=='underway'}"><a  th:href="'/Kill/One?killid='+${goods.killid}" >立即秒杀</a></span>
            <span th:if="${flag=='end'}" id="flag">已经结束</span>
        </td>
    </tr>
    <tr>
        <td>商品原价</td>
        <td colspan="3" th:text="${goods.goodsprice}"></td>
    </tr>
    <tr>
        <td>秒杀价</td>
        <td colspan="3" th:text="${goods.killprice}"></td>
    </tr>
    <tr>
        <td>库存数量</td>
        <td colspan="3" th:text="${goods.stockcount}"></td>
    </tr>
</table>
<a href="/user/logOut">注销</a>
</body>
<script>
    function showtime() {
        var time =new Date().getTime();
        var date=document.getElementById("date").innerText;
        var mun;
        var f=document.getElementById("flag").innerText;
        date=new Date(date).getTime();
        if("结束了"!=f){
            mun=date-time;
        }else{
            document.getElementById("killStatus").innerText ="结束了";
            return
        }

        var days = parseInt(mun / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数
        var hours = parseInt(mun / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时
        var minutes = parseInt(mun / 1000 / 60 % 60, 10);//计算剩余的分钟
        var seconds = parseInt(mun / 1000 % 60, 10);//计算剩余的秒数



        document.getElementById("killStatus").innerText = days+"   " + hours+":" + minutes+":"+seconds;


    }

    window.onload=function(){
        showtime()
    }
    setInterval (function() {
        showtime();
    },1000);


</script>
</html>